@charset "utf-8";
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem ;
}
@function bfb($b){
    @return $b/1920*100%;
}
@function bfbl($b){
    @return $b/1477*100%;
}
@function bfbs($b){
    @return $b/930*100%;
}
.web{
    width: 100%;
    img:hover{
        transition: all 0.5s; 
        transform: scale(1.1);
    }
}
.center{
    width: bfb(1477);
    margin: 0 auto;
}
.banner{
    width: 100%;
    overflow: hidden;
    position: relative;
    .img{
        width: 100%;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
        }
        .btn{
            display: block;
            width: bfbl(227);
            height: 38px;
            border: 1px solid #F5F5F5;
            color: #FFFFFF;
            position: absolute;
            top:60%;
            left: 50%;
            transform: translate(-50%);
            font-size: 14px;
            line-height: 38px;
            text-align: center;
        }
        .btn:hover{
            background: rgba(255,255,255,.5);
        }
    }
}
.img_wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 28px 0;
    .img_nav{
        width: bfbl(463);
        overflow: hidden;
        .img_i{
            width: 100%;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
            }
        }
        .img_b{
            display: block;
            margin-top: 20px;
            width: 100%;
            height: 40px;
            border-top:1px solid #d9d7cc;
            border-bottom:1px solid #d9d7cc;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000000;
            span{
                font-size: 12px;
                padding-right: 10px;
            }
        }
    }
}
.life_wrap{
    width: bfbl(930);
    margin: 0 auto 50px ;
    .life{
        width: 100%;
        display:flex;
        justify-content: space-between;
        align-items: center;
//      padding-top: 20px;
        margin-top: 60px;
        .img{
            width:bfbs(454);
            overflow: hidden;
            img{
                display: block;
                width: 100%;
            }
        }
        .text{
            width: bfbs(400);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            span{
                font-size: 12px;
                letter-spacing: 1px;
                color: #1b5999;
            }
            .text_h{
                font-size:16px;
                letter-spacing: 1px;
                color: #262626;
                padding-top: 10px;
                font-weight: 700;
            }
            .text_t{
                font-size: 12px;
                color: #262626;
                padding-top: 10px;
            }
            .btn{
                margin-top: 10px;
                display: block;
                width: 150px;
                height: 38px;
                font-size: 14px;
                text-align: center;
                line-height: 38px;
                border: 1px solid #000000;
                color: #000000;
            }
            .btn:hover{
                background: rgba(150,150,150,.5);
            }
        }
    }
    .btna{
        display: block;
        width: bfbs(300);
        height: 38px;
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
        letter-spacing: 1px;
        border: 1px solid #000000;
        line-height: 38px;
        margin-top: 80px;
        color: #000000;
    }
    .btna:hover{
                background: rgba(150,150,150,.5);
            }
}
@media only screen and (min-width:768px){
    .web_wrap{
        min-width:1100px ;
    }
}
@media only screen and (max-width:768px){
    .center{
    width: 96%;
    margin: 0 auto;
}
.banner{
    width: 100%;
    overflow: hidden;
    position: relative;
    .img{
        width: 100%;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
        }
        .btn{
            display: block;
            width: 120px;
            height: 38px;
            border: 1px solid #F5F5F5;
            color: #FFFFFF;
            position: absolute;
            top:60%;
            left: 50%;
            transform: translate(-50%);
            font-size: 14px;
            line-height: 38px;
            text-align: center;
        }
        .btn:hover{
            background: rgba(255,255,255,.5);
        }
    }
}
.img_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 0;
    .img_nav{
        width: 100%;
        overflow: hidden;
        .img_i{
            width: 100%;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
            }
        }
        .img_b{
            display: block;
            margin-top: 10px;
            width: 100%;
            height: 30px;
            border-top:1px solid #d9d7cc;
            border-bottom:1px solid #d9d7cc;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000000;
            margin-bottom: 10px;
            span{
                font-size: 12px;
                padding-right: 10px;
            }
        }
    }
}
.life_wrap{
    width: 100%;
    margin: 0 auto 10px ;
    .life{
        width: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;
        .img{
            width:100%;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
            }
        }
        .text{
            width:100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            span{
                width: 100%;
                font-size: 13px;
                letter-spacing: 1px;
                color: #1b5999;
                display: block;
            }
            .text_h{
                width: 100%;
                font-size:16px;
                letter-spacing: 1px;
                color: #262626;
                padding-top: 5px;
                font-weight: 700;
            }
            .text_t{
                width: 100%;
                font-size: 14px;
                color: #262626;
                padding-top: 5px;
            }
            .btn{
                margin-top: 5px;
                display: block;
                width: 100%;
                height: 28px;
                font-size: 16px;
                text-align: center;
                line-height: 28px;
                border: 1px solid #000000;
                color: #000000;
                margin-bottom: 10px;
            }
            .btn:hover{
                background: rgba(150,150,150,.5);
            }
        }
    }
    .btna{
        display: block;
        width: 100%;
        height: 38px;
        margin: 0 auto;
        font-size: 18px;
        text-align: center;
        letter-spacing: 1px;
        border: 1px solid #000000;
        line-height: 38px;
        margin-top: 20px;
        color: #000000;
    }
    .btna:hover{
                background: rgba(150,150,150,.5);
            }
}
}
